<!--
 * @description: 
 * @Date: 2022-10-16 19:01:08
 * @LastEditTime: 2022-11-07 17:39:43
-->
<template>
  <div class="theme-control space-y-2">
    <div class="labelItem">
      <img class="rounded-lg" :src="store.state.config?.theme?.backgroundImage" />
    </div>
    <div class="labelItem">
      <el-upload
        class="upload-demo"
        :show-file-list="false"
        :on-success="setBackground"
        :action="store.state.site.upload"
      >
        <el-button size="small" class="bg-blue-400 mr-2.5" type="primary">上传</el-button>
      </el-upload>
      <!-- <el-button size="mini" type="primary" class="bg-blue-400" @click.stop="setBackground">修改</el-button> -->
      <el-button size="small" type="danger" class="bg-pink-400" @click.stop="download"
        >下载</el-button
      >
      <el-button size="small" type="info" class="bg-slate-600" @click.stop="defaultBg"
        >默认</el-button
      >
    </div>
    <div class="labelItem h-11">
      <span class="flex-shrink-0">背景模糊</span>
      <el-slider
        class="w-full ml-3"
        @change="store.commit('updateConfig')"
        :max="20"
        v-model="store.state.config.theme.blur"
      />
    </div>
    <div class="labelItem h-11">
      <span class="flex-shrink-0">开启底部快捷方式</span>
      <el-switch
        @change="store.commit('updateConfig')"
        v-model="store.state.config.theme.tabbar"
        class="ml-auto"
      />
    </div>
    <div class="labelItem h-11">
      <span class="flex-shrink-0">时钟字体颜色</span>
      <div class="ml-auto">
        <el-color-picker
          v-model="store.state.config.theme.timeColor"
          @change="setTimeColor"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { useStore } from "vuex";
import defaultConfig from "../../util/defaultConfig";
import redirectUrl from "../../util/href";
const store = useStore();
const download = () => {
  redirectUrl(store.state.config.theme.backgroundImage, true);
};
const setBackground = (data) => {
  if (data.code == 1) {
    store.state.config.theme.backgroundImage = data.data.url;
    store.commit("updateConfig");
  }
};
const setTimeColor = (data) => {
  store.commit("updateConfig");
};

const defaultBg = () => {
  store.state.config.theme.backgroundImage = defaultConfig.theme.backgroundImage;
  store.commit("updateConfig");
};
</script>
<style lang="less"></style>
